<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
  </head>
  
  <body>
    <input type="button" value="response" onclick="sendResponseReq()">
    <input type="button" value="responseType" onclick="sendResponseTypeReq()">
    <input type="button" value="responseText" onclick="sendResponseTextReq()">
    <input type="button" value="responseXML" onclick="sendResponseXMLReq()">
    <input type="button" value="responseURL" onclick="sendResponseURLReq()">
  </body>
  
  <script>
    function sendResponseReq() {
      const xhr = new XMLHttpRequest();
      
      xhr.onloadend = () => {
        console.log('服务器响应的数据体', xhr.response); // 图片的二进制数据
      };
      
      xhr.open('GET', 'http://localhost:9000/back_end_static/image.jpg');
      xhr.send(null);
    }
    
    function sendResponseTypeReq() {
      const xhr = new XMLHttpRequest();
      
      xhr.responseType = 'json';
      xhr.onloadend = () => {
        console.log('服务器响应的数据类型', xhr.responseType); // json
        // 默认为string数据，此时转为json数据
        console.log('服务器响应的数据体类型', typeof xhr.response); // object
      };
      
      xhr.open('GET', 'http://localhost:9000/back_end_get/params?query_name=query');
      xhr.send(null);
    }
    
    function sendResponseTextReq() {
      const xhr = new XMLHttpRequest();
      
      xhr.onloadend = () => {
        console.log('服务器响应的字符串数据体', xhr.responseText); // {"code":200,"msg":"请求成功","data":{"params":{…},"query":{…}}}
        console.log('服务器响应的数据体类型', typeof xhr.response); // string
      };
      
      xhr.open('GET', 'http://localhost:9000/back_end_get/params?query_name=query');
      xhr.send(null);
    }
    
    function sendResponseXMLReq() {
      const xhr = new XMLHttpRequest();
      
      xhr.responseType = 'document';
      xhr.onloadend = () => {
        console.log('服务器响应的HTML或XML文档对象数据体', xhr.responseXML); // #document…
      };
      
      xhr.open('GET', 'http://localhost:9000/back_end_static/index.html');
      xhr.send(null);
    }
    
    function sendResponseURLReq() {
      const xhr = new XMLHttpRequest();
      
      xhr.onloadend = () => {
        console.log('实际响应服务器的网址', xhr.responseURL); // http://localhost:9000/back_end_static/index.html
      };
      
      xhr.open('GET', 'http://localhost:9000/back_end_static/index.html');
      xhr.send(null);
    }
  </script>
</html>